import { updateQueue } from './my/component';
import React from './my/react';
import ReactDOM from './my/react-dom';


// import ReactDOM from 'react-dom/client';

// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
//   // <App />
// );

/**
 * jsx==>vnode案例
 */
// let el = React.createElement("div", {
//   key: 'div--90',
//   className: 'dev-0'
// }, '666', React.createElement("span", {
//   key: 'span--34',
//   className: 'span-0',
// }, 999));

// console.log(el)
// ;
// ReactDOM.render(el,document.getElementById("root"))

// import React from "react";
// import ReactDOM from 'react-dom/client';
/**
 * 定义函数式组件
 * 
 * 1.函数式组件名字首字母必须大写，
 * 2.函数式组件的返回值是一个react元素
 * 3.jsx是一个父子结构
 * 4.还有一个props对象作为参数
 */
function FunctionComponent(props) {
  // return <h1>hello {props.name}</h1>
  return React.createElement('h1', { className: props.className }, 666);
}

let el = <FunctionComponent className="100"></FunctionComponent>;

el = React.createElement(FunctionComponent, {
  className: '555'
});


/**
 * 实现类组件
 */
class InClassComponent extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    console.log(this.props)
    return <h1>hello {this.props.className}</h1>
  }
}

/**
 * 实现组件更新
 * 组件数据来源：
 * 1.父类的props
 * 2.一个state对象
 * 更新的唯一方法setState
 */

class ParentComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0
    }
  }
  handClick = (evet) => {
    console.log(evet)
    // updateQueue.isBatchData = true;
    this.setState({
      num: this.state.num + 1
    })
    this.setState({
      num: this.state.num + 1
    })
    this.setState({
      num: this.state.num + 1
    });
    console.log(this.state.num
      );
    // updateQueue.batchUpdate();
  }
  render() {
    return <div>
      <h1>{this.state.num}</h1>
      {/*事件*/}
      <button onClick={this.handClick}>+</button>
    </div>
  }
}

el = React.createElement(InClassComponent, {
  className: 'xxx'
})

el = React.createElement(ParentComp, {
  className: 'xxx'
})


console.log(el);
// ReactDOM.createRoot(document.getElementById("root")).render(
//   // <InClassComponent name="100"></InClassComponent>
//   // <ParentComp className="100"></ParentComp>
// );
ReactDOM.render(el, document.getElementById("root"))